<template>
  <div>
    <input type="text" v-model="xiangc.name">
    <button @click="addxiangc">创建</button>
    <table align="center">
        <tr v-for="(i, index) in allxiangc" :key="index">
            <td> {{i.name}}</td>
            <td><button @click="del_xc(i.id)">删除</button> --- <button @click="up_xc(index)">修改</button></td>
        </tr>
    </table>
    <input type="text" v-model="update_xc['id']">
    <input type="text" v-model="update_xc['name']">
    <button @click="que">确认修改</button>
    <br><br>
    <el-upload
  class="upload-demo"
  action="#"
  :before-upload="upload"

 >
  <el-button size="small" type="primary">点击上传</el-button>
  <div slot="tip" class="el-upload__tip">只能上传jpg/png文件，且不超过500kb</div>
</el-upload><br>
<div>
    名字<input type="text" v-model="zp['name']"><br>
    <select name="" id="" v-model="zp['zid']">
        <option :value="i.id" v-for="(i, index) in allxiangc" :key="index">{{i.name}}</option>
    </select><br>
    <button @click="addd">添加</button>

    {{zp}}
</div>

<div>
    <ul>
        <li  v-for="(i, index) in allxiangc" :key="index"><a href="#" @click="zhaop(i.id)">{{i.name}}</a></li>
    </ul>
    <ul  v-for="(i, index) in zhaopian" :key="index">
        <li><a href="#" @click="shan(i.id)">删除</a></li>
        <li><img :src="i.url" alt=""></li>
        
    </ul>

    

</div>
  </div>
</template>

<script>
export default {
    data(){
        return{
            xiangc:{
                "name":""
            },
            allxiangc:[],
            update_xc:{
                "id":0,
                "name":"",
                "zid":0
            },
            zp:{

                "url":'',
                "name":"",
                "zid":0
            },
            zhaopian:{
                "id":0,
                "url":""
            }
        }
    },
    methods:{
        addxiangc(){
            this.axios.post("add_xc", this.xiangc).then((res) => {
                alert(res.data.mes)
            }).catch((err) => {
                
            });
        },
        allxiang(){
            this.axios.get("get_lei").then((res) => {
                this.allxiangc = res.data.list
            }).catch((err) => {
                
            });
        },
        del_xc(id){
            this.axios.delete("del_xc?id="+id).then((res) => {
                alert(res.data.mes)
                this.allxiang()
            }).catch((err) => {
                
            });
        },
        up_xc(id){
            this.update_xc = this.allxiangc[id]
        },
        que(){
            this.axios.put("up_xiang", this.update_xc).then((res) => {
                alert(res.data.mes)
                this.allxiang()
            }).catch((err) => {
                
            });
        },
        upload(file){
            var data = new FormData()
            data.append("file", file)
            this.axios.post("upload", data).then((res) => {
                this.zp.url ="http://localhost:5000/"+ res.data.url
            }).catch((err) => {
                
            });
            
            
        },
        addd(){
            this.axios.post("get_add", this.zp).then((res) => {
                alert(res.data.res)
            }).catch((err) => {
                
            });
        },
        zhaop(id){
            this.axios.get("get_all?id="+id).then((res) => {
                this.zhaopian = res.data.mes
            }).catch((err) => {
                
            });
        },
        shan(id){
            this.axios.delete("get_del?id="+id).then((res) => {
                alert(res.data.mes)
                this.allxiang()
            }).catch((err) => {
                
            });
        }
    },
    mounted(){
        this.allxiang()
        this.zhaop(1)
    }

}
</script>

<style>

</style>